<template>
	<view class="animated fadeIn faster">
			<view class="status-bar-height bg-bar"></view>
			<view class="p-3 bg-bar">
				<view class="d-flex d-flex-center d-flex-middle mb-3">
					<text class="font32 font-bold">消息</text>
				</view>
				<view class="search-box d-flex d-flex-center d-flex-middle">
					<text class="iconfont icon-chazhao font-bold font30 mr-1" style="color:#949494"></text>
					<text style="color: #cdcdcd;">搜索</text>
				</view>
			</view>
			<view class="d-flex" style="border-top: #e4e4e4;height: 145rpx;" v-for="item in conversationList" :key="item._id" @click="toChat(item.id)">
				<view class="avatar position-relative">
					<image class="rounded15" :src="item.user_info.avatar_file.url" mode="aspectFill" style="width: 100rpx;height: 100rpx;"></image>
					<view class="info-num d-flex d-flex-center d-flex-middle" v-if="item.unread_count>0">
						<text class="font22 colorfff">{{item.unread_count}}</text>
					</view>
				</view>
				<view class="callinfo d-flex-item d-flex-column d-flex-center">
					<view class="d-flex d-flex-between d-flex-middle mb-1">
						<text class="font32">{{item.user_info.nickname}}</text>
						<text class="font24 colorb0">{{friendlyTime(item.last_msg_create_time)}}</text>
					</view>
					<view class="d-flex d-flex-between d-flex-middle text-clamp">
						<text class="font26 colorb0">{{item.last_msg_note}}</text>
					</view>
				</view>
			</view>
		<uni-list>
			<uni-list-item
				title="uni-im 会话列表" @click="toPath('/uni_modules/uni-im/pages/index/index')" :link="true"
				:show-badge="unreadMsgCount>0" :badge-text="unreadMsgCount+''" :badge-style="{'background':'#f41500'}"
			></uni-list-item>
			<uni-list-item
				title="用户列表" @click="toPath('/uni_modules/uni-im/pages/userList/userList')" :link="true"
			></uni-list-item>
			<uni-list-item
				title="通讯录" @click="toPath('/uni_modules/uni-im/pages/contacts/contacts')" :link="true"
				:show-badge="notificationUnreadCount>0" :badge-text="notificationUnreadCount+''" :badge-style="{'background':'#f41500'}"
			></uni-list-item>
			<uni-list-item
				title="个人中心" @click="toPath('/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true')" :link="true"
			></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		computed: {
			unreadMsgCount(){
				return uniIm.conversation.unreadCount()
			},
			notificationUnreadCount(){
				return uniIm.notification.unreadCount()
			},
			friendlyTime:function() {
				return function(ctime){
					// 使得时间会随着心跳动态更新
					let timestamp = ctime + uniIm.heartbeat * 0
					let friendlyTime = uniIm.utils.toFriendlyTime(timestamp)
					// console.log('friendlyTime',friendlyTime);
					let friendlyTimeArr = friendlyTime.split(' ')
					let friendlyTimeArrL = friendlyTimeArr.length
					// 如果含 年/月（不在3天内，且不是同一周），去掉时间
					if (friendlyTimeArrL == 3 && friendlyTime.includes('/')) {
						friendlyTime = friendlyTimeArr[0]
					}
					return friendlyTime
				}
			}
		},
		data() {
			return {
				conversationList:[],
			}
		},
		onReady() {
			this.getConversation()
			
		},
		methods: {
			async getConversation(){
				uniIm.conversation.loadMore.type = 'all'
				this.conversationList = await uniIm.conversation.__get()
			},
			toChat(cid){
				// uni.navigateTo({
				//   url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + cid,
				//   animationDuration: 300
				// })
				uni.navigateTo({
				  url: '/pages/chat/chat?conversation_id=' + cid,
				  animationDuration: 300
				})
			},
			//未读系统通知数量
			toPath(path){
				uni.navigateTo({
					url: path,
					fail: () => {
						uni.switchTab({
							url:path,
							fail: (e) => {
								console.error(e);
							}
						})
					}
				});
			}
		}
	}
</script>

<style scoped>
	.search-box{
		height: 80rpx;
		border-radius: 14rpx;
		background-color: #ffffff;
	}
	.avatar{
		padding-top: 22rpx;
		padding-bottom: 22rpx;
		padding-left: 30rpx;
		padding-right: 25rpx;
		
	}
	.info-num{
		position:absolute;
		top: 10rpx;
		right: 10rpx;
		height: 36rpx;
		min-width: 36rpx;
		border-radius: 36rpx;
		background-color: #ff584c;
		z-index: 10;
	}
	.callinfo{
		height: 144rpx;
		padding-right: 30rpx;
		border-bottom: solid 1px #ececec;
	}
</style>